<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 13 Tips and Tricks | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.21 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 13 Tips and Tricks | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 13 Tips and Tricks | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2021-04-19" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="shiny-complete.html"/>
<link rel="next" href="shiny-output.html"/>
<script src="libs/jquery-3.5.1/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="libs/plotly-binding-4.9.3/plotly.js"></script>
<script src="libs/typedarray-0.1/typedarray.min.js"></script>
<link href="libs/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css-1.57.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main-1.57.1/plotly-latest.min.js"></script>
<script src="libs/core-js-2.5.3/shim.min.js"></script>
<script src="libs/react-16.12.0/react.min.js"></script>
<script src="libs/react-16.12.0/react-dom.min.js"></script>
<script src="libs/reactwidget-1.0.0/react-tools.js"></script>
<script src="libs/reactable-binding-0.2.3/reactable.js"></script>
<script src="libs/r2d3-render-0.1.0/r2d3-render.js"></script>
<script src="libs/webcomponents-2.0.0/webcomponents.js"></script>
<script src="libs/r2d3-binding-0.2.5/r2d3.js"></script>
<script src="libs/d3v6-6.2.0/d3.min.js"></script>
<script src="libs/viz-1.8.2/viz.js"></script>
<link href="libs/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding-1.0.6.1/grViz.js"></script>
<link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding-0.17/datatables.js"></script>
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core-1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74544116-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-74544116-1');
</script>
<meta property="og:title" content="Chapter 13 Tips and Tricks | JavaScript for R">
<meta property="og:description" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta property="og:image" content="https://book.javascript-for-r.com/images/social.png">
<meta property="og:url" content="https://book.javascript-for-r.com/">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Chapter 13 Tips and Tricks | JavaScript for R">
<meta name="twitter:image:alt" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta name="twitter:site" content="@jdatap">


<style type="text/css">
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(title);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a><ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics and Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="intro-overview.html"><a href="intro-overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a><ul>
<li class="chapter" data-level="1.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-overview-rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a><ul>
<li class="chapter" data-level="1.2.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a><ul>
<li class="chapter" data-level="1.3.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-reactr-vuer"><i class="fa fa-check"></i><b>1.3.1</b> reactR &amp; vueR</a></li>
<li class="chapter" data-level="1.3.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a><ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-package-dev"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a><ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-create-pkg"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#basics-installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#basics-build-load-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-json"><i class="fa fa-check"></i><b>2.2</b> JSON</a><ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-tabular"><i class="fa fa-check"></i><b>2.2.2</b> Tabular Data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a><ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-chrome-devtools"><i class="fa fa-check"></i><b>2.3.1</b> Developer Tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-var-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable Declaration and Scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document Object Model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a><ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-static-files"><i class="fa fa-check"></i><b>2.4.1</b> Serving Static Files</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-htmltools"><i class="fa fa-check"></i><b>2.4.2</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-deps-pro-cons"><i class="fa fa-check"></i><b>2.4.3</b> Serving vs. htmltools</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a><ul>
<li class="chapter" data-level="3.1" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-plotly"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-dt"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
<li class="chapter" data-level="3.3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-crosstalk"><i class="fa fa-check"></i><b>3.3</b> Crosstalk</a></li>
<li class="chapter" data-level="3.4" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-conclude"><i class="fa fa-check"></i><b>3.4</b> Wrap-up</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="widgets-basics.html"><a href="widgets-basics.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a><ul>
<li class="chapter" data-level="4.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-study"><i class="fa fa-check"></i><b>4.1</b> Read and Study</a></li>
<li class="chapter" data-level="4.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates"><i class="fa fa-check"></i><b>4.2</b> Candidate Libraries</a><ul>
<li class="chapter" data-level="4.2.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-plotly"><i class="fa fa-check"></i><b>4.2.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.2.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-highcharts"><i class="fa fa-check"></i><b>4.2.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.2.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-chart.js"><i class="fa fa-check"></i><b>4.2.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-inner-workings"><i class="fa fa-check"></i><b>4.3</b> How It Works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="widgets-first.html"><a href="widgets-first.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a><ul>
<li class="chapter" data-level="5.1" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-htmloutput"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-js-files"><i class="fa fa-check"></i><b>5.3</b> JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="widgets-realistic.html"><a href="widgets-realistic.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a><ul>
<li class="chapter" data-level="6.1" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-deps"><i class="fa fa-check"></i><b>6.1</b> Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-implementation"><i class="fa fa-check"></i><b>6.2</b> Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-html-element"><i class="fa fa-check"></i><b>6.3</b> HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="widgets-full.html"><a href="widgets-full.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a><ul>
<li class="chapter" data-level="7.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-deps"><i class="fa fa-check"></i><b>7.1</b> Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-js"><i class="fa fa-check"></i><b>7.2</b> JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a><ul>
<li class="chapter" data-level="7.4.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-js"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify"><i class="fa fa-check"></i><b>7.4.2</b> Modify Serialiser</a></li>
<li class="chapter" data-level="7.4.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-replace"><i class="fa fa-check"></i><b>7.4.3</b> Replace Serialiser</a></li>
<li class="chapter" data-level="7.4.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify-data"><i class="fa fa-check"></i><b>7.4.4</b> Modify the Data</a></li>
<li class="chapter" data-level="7.4.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-conclusion"><i class="fa fa-check"></i><b>7.4.5</b> Pros and Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-on-print"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="widgets-adv.html"><a href="widgets-adv.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a><ul>
<li class="chapter" data-level="8.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-shared"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a><ul>
<li class="chapter" data-level="8.1.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prerender"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks and Security</a></li>
<li class="chapter" data-level="8.4" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-js"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prepend-append"><i class="fa fa-check"></i><b>8.5</b> Prepend and Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a><ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk Examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-req"><i class="fa fa-check"></i><b>9.2</b> Crosstalk Requirements</a></li>
<li class="chapter" data-level="9.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-inner-workings"><i class="fa fa-check"></i><b>9.3</b> How it Works</a><ul>
<li class="chapter" data-level="9.3.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-keys"><i class="fa fa-check"></i><b>9.3.1</b> Keys</a></li>
<li class="chapter" data-level="9.3.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-communication-lines"><i class="fa fa-check"></i><b>9.3.2</b> Communication Lines</a></li>
<li class="chapter" data-level="9.3.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-groups"><i class="fa fa-check"></i><b>9.3.3</b> Groups</a></li>
</ul></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with Gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-r"><i class="fa fa-check"></i><b>9.5</b> R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-js"><i class="fa fa-check"></i><b>9.6</b> JavaScript Code</a><ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-send-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send Selected Keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-set-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set Selected Keys</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-using"><i class="fa fa-check"></i><b>9.7</b> Using Crosstalk with Gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="widgets-final.html"><a href="widgets-final.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a><ul>
<li class="chapter" data-level="10.1" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets and Data</a></li>
<li class="chapter" data-level="10.2" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-interface"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
<li class="chapter" data-level="10.4" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-exercises"><i class="fa fa-check"></i><b>10.4</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="11" data-path="shiny-intro.html"><a href="shiny-intro.html"><i class="fa fa-check"></i><b>11</b> Bidirectional Communication</a><ul>
<li class="chapter" data-level="11.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-websocket"><i class="fa fa-check"></i><b>11.1</b> WebSocket an Shiny</a></li>
<li class="chapter" data-level="11.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-sessions"><i class="fa fa-check"></i><b>11.2</b> Sessions</a></li>
<li class="chapter" data-level="11.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-example"><i class="fa fa-check"></i><b>11.3</b> Alerts, an example</a><ul>
<li class="chapter" data-level="11.3.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-explore"><i class="fa fa-check"></i><b>11.3.1</b> Explore</a></li>
<li class="chapter" data-level="11.3.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-r-to-js"><i class="fa fa-check"></i><b>11.3.2</b> From R to JavaScript</a></li>
<li class="chapter" data-level="11.3.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-serialise"><i class="fa fa-check"></i><b>11.3.3</b> Serialisation</a></li>
<li class="chapter" data-level="11.3.4" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-js2r"><i class="fa fa-check"></i><b>11.3.4</b> JavaScript to R</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="12" data-path="shiny-complete.html"><a href="shiny-complete.html"><i class="fa fa-check"></i><b>12</b> A Complete Integration</a><ul>
<li class="chapter" data-level="12.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-discover"><i class="fa fa-check"></i><b>12.1</b> Discover</a></li>
<li class="chapter" data-level="12.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-setup"><i class="fa fa-check"></i><b>12.2</b> Setup</a></li>
<li class="chapter" data-level="12.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-dependencies"><i class="fa fa-check"></i><b>12.3</b> Dependencies</a></li>
<li class="chapter" data-level="12.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-images"><i class="fa fa-check"></i><b>12.4</b> Static Files</a></li>
<li class="chapter" data-level="12.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-skeleton"><i class="fa fa-check"></i><b>12.5</b> Skeleton</a></li>
<li class="chapter" data-level="12.6" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-r2js"><i class="fa fa-check"></i><b>12.6</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.7" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-js2r"><i class="fa fa-check"></i><b>12.7</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.8" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-input-handler"><i class="fa fa-check"></i><b>12.8</b> Input handler</a></li>
<li class="chapter" data-level="12.9" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg"><i class="fa fa-check"></i><b>12.9</b> As a Package</a><ul>
<li class="chapter" data-level="12.9.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-deps"><i class="fa fa-check"></i><b>12.9.1</b> Dependencies</a></li>
<li class="chapter" data-level="12.9.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-trigger"><i class="fa fa-check"></i><b>12.9.2</b> Trigger classification</a></li>
<li class="chapter" data-level="12.9.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-js-code"><i class="fa fa-check"></i><b>12.9.3</b> JavaScript code</a></li>
<li class="chapter" data-level="12.9.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-input-handler"><i class="fa fa-check"></i><b>12.9.4</b> Input handler</a></li>
<li class="chapter" data-level="12.9.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-test"><i class="fa fa-check"></i><b>12.9.5</b> Test</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="13" data-path="shiny-tips.html"><a href="shiny-tips.html"><i class="fa fa-check"></i><b>13</b> Tips and Tricks</a><ul>
<li class="chapter" data-level="13.1" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-events"><i class="fa fa-check"></i><b>13.1</b> Shiny Events</a></li>
<li class="chapter" data-level="13.2" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-table-btn"><i class="fa fa-check"></i><b>13.2</b> Table Buttons</a></li>
<li class="chapter" data-level="13.3" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-jQuery"><i class="fa fa-check"></i><b>13.3</b> jQuery</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="shiny-output.html"><a href="shiny-output.html"><i class="fa fa-check"></i><b>14</b> Custom Outputs</a><ul>
<li class="chapter" data-level="14.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inner-workings"><i class="fa fa-check"></i><b>14.1</b> Inner-workings</a></li>
<li class="chapter" data-level="14.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-setup"><i class="fa fa-check"></i><b>14.2</b> Setup</a></li>
<li class="chapter" data-level="14.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-r-fun"><i class="fa fa-check"></i><b>14.3</b> Output R Function</a></li>
<li class="chapter" data-level="14.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-html"><i class="fa fa-check"></i><b>14.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="14.5" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-renderer"><i class="fa fa-check"></i><b>14.5</b> Output Renderer</a></li>
<li class="chapter" data-level="14.6" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-binding"><i class="fa fa-check"></i><b>14.6</b> JavaScript Output Binding</a><ul>
<li class="chapter" data-level="14.6.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-title"><i class="fa fa-check"></i><b>14.6.1</b> Boxxy Title</a></li>
<li class="chapter" data-level="14.6.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-value"><i class="fa fa-check"></i><b>14.6.2</b> Boxxy Value</a></li>
<li class="chapter" data-level="14.6.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-bg-color"><i class="fa fa-check"></i><b>14.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="14.6.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-register"><i class="fa fa-check"></i><b>14.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="14.7" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-usage"><i class="fa fa-check"></i><b>14.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="14.8" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inject"><i class="fa fa-check"></i><b>14.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="14.9" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-preprocess"><i class="fa fa-check"></i><b>14.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="shiny-input.html"><a href="shiny-input.html"><i class="fa fa-check"></i><b>15</b> Custom Inputs</a><ul>
<li class="chapter" data-level="15.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-setup"><i class="fa fa-check"></i><b>15.1</b> Setup</a></li>
<li class="chapter" data-level="15.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-intro"><i class="fa fa-check"></i><b>15.2</b> Switch Input HTML and Style</a></li>
<li class="chapter" data-level="15.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-html"><i class="fa fa-check"></i><b>15.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="15.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-binding"><i class="fa fa-check"></i><b>15.4</b> JavaScript Input Binding</a><ul>
<li class="chapter" data-level="15.4.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-find"><i class="fa fa-check"></i><b>15.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="15.4.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-id"><i class="fa fa-check"></i><b>15.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="15.4.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-value"><i class="fa fa-check"></i><b>15.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="15.4.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-set-value"><i class="fa fa-check"></i><b>15.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="15.4.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-receive-msg"><i class="fa fa-check"></i><b>15.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="15.4.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-sub-unsub"><i class="fa fa-check"></i><b>15.4.6</b> Subscribe and Unsubscribe Inputs</a></li>
<li class="chapter" data-level="15.4.7" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-rate-policy"><i class="fa fa-check"></i><b>15.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="15.4.8" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-register"><i class="fa fa-check"></i><b>15.4.8</b> Registering the Input Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-update"><i class="fa fa-check"></i><b>15.5</b> Update Input</a></li>
<li class="chapter" data-level="15.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-excercise"><i class="fa fa-check"></i><b>15.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="shiny-cookies.html"><a href="shiny-cookies.html"><i class="fa fa-check"></i><b>16</b> Cookies</a><ul>
<li class="chapter" data-level="16.1" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-discover"><i class="fa fa-check"></i><b>16.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="16.2" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-setup"><i class="fa fa-check"></i><b>16.2</b> Setup Project</a></li>
<li class="chapter" data-level="16.3" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-javascript"><i class="fa fa-check"></i><b>16.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="16.4" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-r-code"><i class="fa fa-check"></i><b>16.4</b> R Code</a></li>
<li class="chapter" data-level="16.5" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-exercises"><i class="fa fa-check"></i><b>16.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="shiny-widgets.html"><a href="shiny-widgets.html"><i class="fa fa-check"></i><b>17</b> Widgets with Shiny</a><ul>
<li class="chapter" data-level="17.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-to-r"><i class="fa fa-check"></i><b>17.1</b> Widgets to R</a></li>
<li class="chapter" data-level="17.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handlers"><i class="fa fa-check"></i><b>17.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="17.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-r-to-widgets"><i class="fa fa-check"></i><b>17.3</b> R to Widgets</a><ul>
<li class="chapter" data-level="17.3.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-send-data"><i class="fa fa-check"></i><b>17.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="17.3.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-retrieve"><i class="fa fa-check"></i><b>17.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="17.3.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handle-data"><i class="fa fa-check"></i><b>17.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-proxy"><i class="fa fa-check"></i><b>17.4</b> Proxy Function</a></li>
<li class="chapter" data-level="17.5" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-clear-data"><i class="fa fa-check"></i><b>17.5</b> Clear Data</a></li>
<li class="chapter" data-level="17.6" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-update"><i class="fa fa-check"></i><b>17.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV JavaScript for Computations</b></span></li>
<li class="chapter" data-level="18" data-path="v8.html"><a href="v8.html"><i class="fa fa-check"></i><b>18</b> The V8 Engine</a><ul>
<li class="chapter" data-level="18.1" data-path="v8.html"><a href="v8.html#v8-installation"><i class="fa fa-check"></i><b>18.1</b> Installation</a></li>
<li class="chapter" data-level="18.2" data-path="v8.html"><a href="v8.html#v8-basics"><i class="fa fa-check"></i><b>18.2</b> Basics</a></li>
<li class="chapter" data-level="18.3" data-path="v8.html"><a href="v8.html#v8-external"><i class="fa fa-check"></i><b>18.3</b> External Libraries</a></li>
<li class="chapter" data-level="18.4" data-path="v8.html"><a href="v8.html#v8-npm"><i class="fa fa-check"></i><b>18.4</b> NPM Packages</a></li>
<li class="chapter" data-level="18.5" data-path="v8.html"><a href="v8.html#v8-pkg"><i class="fa fa-check"></i><b>18.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="v8-ml.html"><a href="v8-ml.html"><i class="fa fa-check"></i><b>19</b> Machine Learning</a><ul>
<li class="chapter" data-level="19.1" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-dependency"><i class="fa fa-check"></i><b>19.1</b> Dependency</a></li>
<li class="chapter" data-level="19.2" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-regression"><i class="fa fa-check"></i><b>19.2</b> Simple Regression</a></li>
<li class="chapter" data-level="19.3" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-exercises"><i class="fa fa-check"></i><b>19.3</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>V Robust JavaScript</b></span></li>
<li class="chapter" data-level="20" data-path="webpack-intro.html"><a href="webpack-intro.html"><i class="fa fa-check"></i><b>20</b> Managing JavaScript</a><ul>
<li class="chapter" data-level="20.1" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-example"><i class="fa fa-check"></i><b>20.1</b> Example</a></li>
<li class="chapter" data-level="20.2" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-browser"><i class="fa fa-check"></i><b>20.2</b> Transpiling</a></li>
<li class="chapter" data-level="20.3" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-minification"><i class="fa fa-check"></i><b>20.3</b> Minification</a></li>
<li class="chapter" data-level="20.4" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-structure"><i class="fa fa-check"></i><b>20.4</b> Bundling and Modules</a></li>
<li class="chapter" data-level="20.5" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-decouple"><i class="fa fa-check"></i><b>20.5</b> Decoupling</a></li>
<li class="chapter" data-level="20.6" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-npm"><i class="fa fa-check"></i><b>20.6</b> NPM</a></li>
<li class="chapter" data-level="20.7" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-conclude"><i class="fa fa-check"></i><b>20.7</b> With R</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html"><i class="fa fa-check"></i><b>21</b> Discover Webpack and NPM</a><ul>
<li class="chapter" data-level="21.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install"><i class="fa fa-check"></i><b>21.1</b> Installation</a><ul>
<li class="chapter" data-level="21.1.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-mac"><i class="fa fa-check"></i><b>21.1.1</b> Mac OS</a></li>
<li class="chapter" data-level="21.1.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-ubuntu"><i class="fa fa-check"></i><b>21.1.2</b> Ubuntu</a></li>
<li class="chapter" data-level="21.1.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-windows"><i class="fa fa-check"></i><b>21.1.3</b> Windows</a></li>
<li class="chapter" data-level="21.1.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-other"><i class="fa fa-check"></i><b>21.1.4</b> Other</a></li>
</ul></li>
<li class="chapter" data-level="21.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-setup"><i class="fa fa-check"></i><b>21.2</b> Set Up the App</a></li>
<li class="chapter" data-level="21.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-init-npm"><i class="fa fa-check"></i><b>21.3</b> Initialise NPM</a></li>
<li class="chapter" data-level="21.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-pkgs"><i class="fa fa-check"></i><b>21.4</b> Installing NPM Packages</a></li>
<li class="chapter" data-level="21.5" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-entry-points"><i class="fa fa-check"></i><b>21.5</b> Entry Point and Output</a></li>
<li class="chapter" data-level="21.6" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-conf"><i class="fa fa-check"></i><b>21.6</b> Configuration File</a></li>
<li class="chapter" data-level="21.7" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-npm-scripts"><i class="fa fa-check"></i><b>21.7</b> NPM scripts</a></li>
<li class="chapter" data-level="21.8" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-webpack-mode"><i class="fa fa-check"></i><b>21.8</b> Source maps</a></li>
<li class="chapter" data-level="21.9" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-bundle"><i class="fa fa-check"></i><b>21.9</b> Bundle</a></li>
<li class="chapter" data-level="21.10" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-internal-dependencies"><i class="fa fa-check"></i><b>21.10</b> Internal Dependencies</a></li>
<li class="chapter" data-level="21.11" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-external-dependencies"><i class="fa fa-check"></i><b>21.11</b> External Dependencies</a></li>
<li class="chapter" data-level="21.12" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export"><i class="fa fa-check"></i><b>21.12</b> Import and Export</a><ul>
<li class="chapter" data-level="21.12.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-named"><i class="fa fa-check"></i><b>21.12.1</b> Named</a></li>
<li class="chapter" data-level="21.12.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-default"><i class="fa fa-check"></i><b>21.12.2</b> Default</a></li>
<li class="chapter" data-level="21.12.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-wrap-up"><i class="fa fa-check"></i><b>21.12.3</b> Wrap-up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="22" data-path="packer-overview.html"><a href="packer-overview.html"><i class="fa fa-check"></i><b>22</b> Webpack with R</a><ul>
<li class="chapter" data-level="22.1" data-path="packer-overview.html"><a href="packer-overview.html#packer-principles"><i class="fa fa-check"></i><b>22.1</b> Principles of packer</a></li>
<li class="chapter" data-level="22.2" data-path="packer-overview.html"><a href="packer-overview.html#packer-scaffolds"><i class="fa fa-check"></i><b>22.2</b> Scaffolds</a></li>
<li class="chapter" data-level="22.3" data-path="packer-overview.html"><a href="packer-overview.html#packer-inputs"><i class="fa fa-check"></i><b>22.3</b> Inputs</a></li>
<li class="chapter" data-level="22.4" data-path="packer-overview.html"><a href="packer-overview.html#packer-r-file"><i class="fa fa-check"></i><b>22.4</b> R file</a></li>
<li class="chapter" data-level="22.5" data-path="packer-overview.html"><a href="packer-overview.html#packer-js-files"><i class="fa fa-check"></i><b>22.5</b> JavaScript Files</a></li>
<li class="chapter" data-level="22.6" data-path="packer-overview.html"><a href="packer-overview.html#packer-bundle"><i class="fa fa-check"></i><b>22.6</b> Bundle</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="packer-adv.html"><a href="packer-adv.html"><i class="fa fa-check"></i><b>23</b> Webpack Advanced</a><ul>
<li class="chapter" data-level="23.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-widgets"><i class="fa fa-check"></i><b>23.1</b> Widgets</a></li>
<li class="chapter" data-level="23.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue"><i class="fa fa-check"></i><b>23.2</b> Shiny with Vue and Bootstrap 4</a><ul>
<li class="chapter" data-level="23.2.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-setup"><i class="fa fa-check"></i><b>23.2.1</b> Setup</a></li>
<li class="chapter" data-level="23.2.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-bs4"><i class="fa fa-check"></i><b>23.2.2</b> Bootstrap 4 Installation</a></li>
<li class="chapter" data-level="23.2.3" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-code"><i class="fa fa-check"></i><b>23.2.3</b> Vue Code</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>VI Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a><ul>
<li class="chapter" data-level="24.1" data-path="conclusion.html"><a href="conclusion.html#conclusion-performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#conclusion-trial-and-error"><i class="fa fa-check"></i><b>24.2</b> Trial and Error</a></li>
<li class="chapter" data-level="24.3" data-path="conclusion.html"><a href="conclusion.html#conclusion-ux"><i class="fa fa-check"></i><b>24.3</b> Functionality and UX</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="shiny-tips" class="section level1">
<h1><span class="header-section-number">Chapter 13</span> Tips and Tricks</h1>
<p>While previous chapters on working with Shiny made use of external libraries and built packages that brought new functionalities previously not available in Shiny, one does not have to go to this length to take advantage of the learnings contained in those pages. Moreover, there are a few exciting things that have not yet been explored.</p>
<div id="shiny-tips-events" class="section level2">
<h2><span class="header-section-number">13.1</span> Shiny Events</h2>
<p>There is a wee bit of documentation tucked away on the <a href="https://shiny.rstudio.com/articles/js-events.html">shiny website</a> that contains a useful list of events that Shiny fires to notify the developer of interesting things that happen in the application. This includes events that are fired when outputs are being recalculated, when Shiny connects, when an element become visible, and more. To demonstrate how to use those events and how handy they can be, we will create a notification which appears to indicate that the server is busy running computations. This could be as fancy as ever, but for simplicity’s sake, we limit the demonstration to showing and hiding a gif.</p>
<p>First, we create the directories and necessary files, and to indicate the server is busy. We’ll be using a gif that is rather well-known in the R community. Note that we will be using some CSS, hence the <code>style.css</code> file.</p>
<div class="sourceCode" id="cb240"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb240-1" title="1"><span class="kw">dir.create</span>(<span class="st">&quot;www&quot;</span>)</a>
<a class="sourceLine" id="cb240-2" title="2"><span class="kw">file.create</span>(<span class="st">&quot;www/script.js&quot;</span>)</a>
<a class="sourceLine" id="cb240-3" title="3"><span class="kw">file.create</span>(<span class="st">&quot;www/style.css&quot;</span>)</a>
<a class="sourceLine" id="cb240-4" title="4"></a>
<a class="sourceLine" id="cb240-5" title="5"><span class="co"># gif</span></a>
<a class="sourceLine" id="cb240-6" title="6">gif &lt;-<span class="st"> </span><span class="kw">paste0</span>(</a>
<a class="sourceLine" id="cb240-7" title="7">  <span class="st">&quot;https://github.com/JohnCoene/javascript-for-r/&quot;</span>,</a>
<a class="sourceLine" id="cb240-8" title="8">  <span class="st">&quot;raw/master/code/events/www/typing.gif&quot;</span></a>
<a class="sourceLine" id="cb240-9" title="9">)</a>
<a class="sourceLine" id="cb240-10" title="10"><span class="kw">download.file</span>(gif, <span class="st">&quot;www/typing.gif&quot;</span>)</a></code></pre></div>
<p>Then we create an application that draws and redraws a plot at the click of a button. Note that we give the gif an id as we will need to be able to retrieve this element JavaScript-side (to dynamically show and hide it), and an <code>id</code> makes for an ideal selector.</p>
<div class="sourceCode" id="cb241"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb241-1" title="1"><span class="co"># app.R</span></a>
<a class="sourceLine" id="cb241-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb241-3" title="3"></a>
<a class="sourceLine" id="cb241-4" title="4">shiny<span class="op">::</span><span class="kw">addResourcePath</span>(<span class="st">&quot;www&quot;</span>, <span class="st">&quot;www&quot;</span>)</a>
<a class="sourceLine" id="cb241-5" title="5"></a>
<a class="sourceLine" id="cb241-6" title="6">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb241-7" title="7">  <span class="co"># import dependencies</span></a>
<a class="sourceLine" id="cb241-8" title="8">  tags<span class="op">$</span><span class="kw">head</span>(</a>
<a class="sourceLine" id="cb241-9" title="9">    tags<span class="op">$</span><span class="kw">link</span>(<span class="dt">href =</span> <span class="st">&quot;www/style.css&quot;</span>, <span class="dt">rel =</span> <span class="st">&quot;stylesheet&quot;</span>),</a>
<a class="sourceLine" id="cb241-10" title="10">    tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;www/script.js&quot;</span>)</a>
<a class="sourceLine" id="cb241-11" title="11">  ),</a>
<a class="sourceLine" id="cb241-12" title="12">  <span class="co"># gif indicator</span></a>
<a class="sourceLine" id="cb241-13" title="13">  tags<span class="op">$</span><span class="kw">img</span>(<span class="dt">src =</span> <span class="st">&quot;www/typing.gif&quot;</span>, <span class="dt">id =</span> <span class="st">&quot;loading&quot;</span>)</a>
<a class="sourceLine" id="cb241-14" title="14">  <span class="kw">plotOutput</span>(<span class="st">&quot;plot&quot;</span>),</a>
<a class="sourceLine" id="cb241-15" title="15">  <span class="kw">actionButton</span>(<span class="st">&quot;render&quot;</span>, <span class="st">&quot;render&quot;</span>)</a>
<a class="sourceLine" id="cb241-16" title="16">)</a>
<a class="sourceLine" id="cb241-17" title="17"></a>
<a class="sourceLine" id="cb241-18" title="18">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session) {</a>
<a class="sourceLine" id="cb241-19" title="19">  output<span class="op">$</span>plot &lt;-<span class="st"> </span><span class="kw">renderPlot</span>({</a>
<a class="sourceLine" id="cb241-20" title="20">    input<span class="op">$</span>render <span class="co"># redraw on click</span></a>
<a class="sourceLine" id="cb241-21" title="21"></a>
<a class="sourceLine" id="cb241-22" title="22">    <span class="co"># simulate time consuming computations</span></a>
<a class="sourceLine" id="cb241-23" title="23">    <span class="kw">Sys.sleep</span>(<span class="dv">2</span>) </a>
<a class="sourceLine" id="cb241-24" title="24">    <span class="kw">plot</span>(cars)</a>
<a class="sourceLine" id="cb241-25" title="25">  })</a>
<a class="sourceLine" id="cb241-26" title="26">}</a>
<a class="sourceLine" id="cb241-27" title="27"></a>
<a class="sourceLine" id="cb241-28" title="28"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>The gif should only be visible when the server is busy, unlike now. Whether it is visible will be controlled in JavaScript, so this should be initialised as hidden using CSS. The following code hides the gif with <code>visibility: hidden</code>, and repositions it, floating on top of the rest of the content in the top right of the page, the <code>z-index</code> ensures the gif appears on top of other elements.</p>
<div class="sourceCode" id="cb242"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb242-1" title="1"><span class="co">/* style.css */</span></a>
<a class="sourceLine" id="cb242-2" title="2"><span class="pp">#loading</span>{</a>
<a class="sourceLine" id="cb242-3" title="3">  <span class="kw">top</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></a>
<a class="sourceLine" id="cb242-4" title="4">  <span class="kw">right</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></a>
<a class="sourceLine" id="cb242-5" title="5">  <span class="kw">height</span>: <span class="dv">200</span><span class="dt">px</span><span class="op">;</span></a>
<a class="sourceLine" id="cb242-6" title="6">  <span class="kw">z-index</span>: <span class="dv">9999</span><span class="op">;</span></a>
<a class="sourceLine" id="cb242-7" title="7">  <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></a>
<a class="sourceLine" id="cb242-8" title="8">  <span class="kw">visibility</span>: <span class="dv">hidden</span><span class="op">;</span></a>
<a class="sourceLine" id="cb242-9" title="9">}</a></code></pre></div>
<p>We can then use the Shiny events to dynamically show and hide the gif when the server is busy. Below we observe the event <code>shiny:busy</code> on the entire page (<code>document</code>) when the event is triggered the gif is retrieved using its <code>id</code> and then made visible by changing its CSS <code>visibility</code> property to <code>visible</code>.</p>
<div class="sourceCode" id="cb243"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb243-1" title="1"><span class="co">// script.js</span></a>
<a class="sourceLine" id="cb243-2" title="2"><span class="at">$</span>(document).<span class="at">on</span>(<span class="st">&#39;shiny:busy&#39;</span><span class="op">,</span> <span class="kw">function</span>(event) <span class="op">{</span></a>
<a class="sourceLine" id="cb243-3" title="3">  <span class="co">// retrieve the gif</span></a>
<a class="sourceLine" id="cb243-4" title="4">  <span class="kw">var</span> title <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;loading&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb243-5" title="5"></a>
<a class="sourceLine" id="cb243-6" title="6">  <span class="co">// make it visible</span></a>
<a class="sourceLine" id="cb243-7" title="7">  <span class="va">title</span>.<span class="va">style</span>.<span class="at">visibility</span> <span class="op">=</span> <span class="st">&quot;visible&quot;</span><span class="op">;</span></a>
<a class="sourceLine" id="cb243-8" title="8"><span class="op">}</span>)<span class="op">;</span></a></code></pre></div>
<p>We then need to hide the gif when the server goes from busy to idle, using the <code>shiny:idle</code> event we can change the visibility of the gif back to <code>hidden</code>.</p>
<div class="sourceCode" id="cb244"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb244-1" title="1"><span class="co">// script.js</span></a>
<a class="sourceLine" id="cb244-2" title="2"><span class="at">$</span>(document).<span class="at">on</span>(<span class="st">&#39;shiny:busy&#39;</span><span class="op">,</span> <span class="kw">function</span>(event) <span class="op">{</span></a>
<a class="sourceLine" id="cb244-3" title="3">  <span class="co">// retrieve the gif</span></a>
<a class="sourceLine" id="cb244-4" title="4">  <span class="kw">var</span> gif <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;loading&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb244-5" title="5"></a>
<a class="sourceLine" id="cb244-6" title="6">  <span class="co">// make gif visible</span></a>
<a class="sourceLine" id="cb244-7" title="7">  <span class="va">gif</span>.<span class="va">style</span>.<span class="at">visibility</span> <span class="op">=</span> <span class="st">&quot;visible&quot;</span><span class="op">;</span></a>
<a class="sourceLine" id="cb244-8" title="8"><span class="op">}</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb244-9" title="9"></a>
<a class="sourceLine" id="cb244-10" title="10"><span class="at">$</span>(document).<span class="at">on</span>(<span class="st">&#39;shiny:idle&#39;</span><span class="op">,</span> <span class="kw">function</span>(event) <span class="op">{</span></a>
<a class="sourceLine" id="cb244-11" title="11">  <span class="kw">var</span> gif <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;loading&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb244-12" title="12"></a>
<a class="sourceLine" id="cb244-13" title="13">  <span class="co">// hide gif</span></a>
<a class="sourceLine" id="cb244-14" title="14">  <span class="va">gif</span>.<span class="va">style</span>.<span class="at">visibility</span> <span class="op">=</span> <span class="st">&quot;hidden&quot;</span><span class="op">;</span></a>
<a class="sourceLine" id="cb244-15" title="15"><span class="op">}</span>)<span class="op">;</span></a></code></pre></div>
<p>The application will then display the gif when the server is busy running computations as in Figure <a href="shiny-tips.html#fig:shiny-events">13.1</a>.</p>
<div class="figure" style="text-align: center"><span id="fig:shiny-events"></span>
<img src="images/shiny-events.png" alt="Shiny with a busy indicator" width="100%" />
<p class="caption">
FIGURE 13.1: Shiny with a busy indicator
</p>
</div>
</div>
<div id="shiny-tips-table-btn" class="section level2">
<h2><span class="header-section-number">13.2</span> Table Buttons</h2>
<p>For instance, using what was learned previously, one can place buttons inside a Shiny table and observe server-side, which is clicked. With a basic application that only includes a table to which we ultimately want to add a column containing a button on each row. Here we achieve this by having each button set a different value (e.g., an id) to an input using <code>shiny.setInputValue</code>, but one could very well create different input names for each button.</p>
<div class="sourceCode" id="cb245"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb245-1" title="1"><span class="kw">library</span>(DT)</a>
<a class="sourceLine" id="cb245-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb245-3" title="3"></a>
<a class="sourceLine" id="cb245-4" title="4">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb245-5" title="5">  <span class="kw">DTOutput</span>(<span class="st">&quot;table&quot;</span>)</a>
<a class="sourceLine" id="cb245-6" title="6">)</a>
<a class="sourceLine" id="cb245-7" title="7"></a>
<a class="sourceLine" id="cb245-8" title="8">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output) {</a>
<a class="sourceLine" id="cb245-9" title="9"></a>
<a class="sourceLine" id="cb245-10" title="10">  output<span class="op">$</span>table &lt;-<span class="st"> </span><span class="kw">renderDT</span>({</a>
<a class="sourceLine" id="cb245-11" title="11">    <span class="kw">datatable</span>(</a>
<a class="sourceLine" id="cb245-12" title="12">      mtcars, </a>
<a class="sourceLine" id="cb245-13" title="13">      <span class="dt">escape =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb245-14" title="14">      <span class="dt">selection =</span> <span class="st">&quot;none&quot;</span>, </a>
<a class="sourceLine" id="cb245-15" title="15">      <span class="dt">rownames =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb245-16" title="16">      <span class="dt">style =</span> <span class="st">&quot;bootstrap&quot;</span></a>
<a class="sourceLine" id="cb245-17" title="17">    )</a>
<a class="sourceLine" id="cb245-18" title="18">  })</a>
<a class="sourceLine" id="cb245-19" title="19"></a>
<a class="sourceLine" id="cb245-20" title="20">}</a>
<a class="sourceLine" id="cb245-21" title="21"></a>
<a class="sourceLine" id="cb245-22" title="22"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>Note that in the above we pass some parameters to <code>datatable</code> not all are necessary at the exception of <code>escape</code>, which is set to <code>FALSE</code> as we will ultimately place HTML code the table which should appear rendered rather than show said code as a string.</p>
<p>We start by creating the on-click functions as R character strings for each row of the <code>mtcars</code> dataset. This is the function that will be triggered when buttons are clicked. This should look familiar we use <code>Shiny.setInputValue</code> to define an input named <code>click</code>, which is set to a different value for every row of the table.</p>
<div class="sourceCode" id="cb246"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb246-1" title="1"><span class="kw">library</span>(DT)</a>
<a class="sourceLine" id="cb246-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb246-3" title="3"></a>
<a class="sourceLine" id="cb246-4" title="4">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb246-5" title="5">  <span class="kw">DTOutput</span>(<span class="st">&quot;table&quot;</span>)</a>
<a class="sourceLine" id="cb246-6" title="6">)</a>
<a class="sourceLine" id="cb246-7" title="7"></a>
<a class="sourceLine" id="cb246-8" title="8">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output) {</a>
<a class="sourceLine" id="cb246-9" title="9"></a>
<a class="sourceLine" id="cb246-10" title="10">  output<span class="op">$</span>table &lt;-<span class="st"> </span><span class="kw">renderDT</span>({</a>
<a class="sourceLine" id="cb246-11" title="11">    <span class="co"># on click function</span></a>
<a class="sourceLine" id="cb246-12" title="12">    onclick &lt;-<span class="st"> </span><span class="kw">sprintf</span>(</a>
<a class="sourceLine" id="cb246-13" title="13">      <span class="st">&quot;Shiny.setInputValue(&#39;click&#39;, &#39;%s&#39;)&quot;</span>, </a>
<a class="sourceLine" id="cb246-14" title="14">      <span class="kw">rownames</span>(mtcars)</a>
<a class="sourceLine" id="cb246-15" title="15">    ) </a>
<a class="sourceLine" id="cb246-16" title="16">    </a>
<a class="sourceLine" id="cb246-17" title="17">    <span class="kw">datatable</span>(</a>
<a class="sourceLine" id="cb246-18" title="18">      mtcars, </a>
<a class="sourceLine" id="cb246-19" title="19">      <span class="dt">escape =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb246-20" title="20">      <span class="dt">selection =</span> <span class="st">&quot;none&quot;</span>, </a>
<a class="sourceLine" id="cb246-21" title="21">      <span class="dt">rownames =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb246-22" title="22">      <span class="dt">style =</span> <span class="st">&quot;bootstrap&quot;</span></a>
<a class="sourceLine" id="cb246-23" title="23">    )</a>
<a class="sourceLine" id="cb246-24" title="24">  })</a>
<a class="sourceLine" id="cb246-25" title="25"></a>
<a class="sourceLine" id="cb246-26" title="26">}</a>
<a class="sourceLine" id="cb246-27" title="27"></a>
<a class="sourceLine" id="cb246-28" title="28"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>Next, we create the buttons for each row and set the JavaScript functions previously created as the <code>onClick</code> attributes. The JavaScript code passed to the <code>onClick</code> attribute will be executed every time the button is clicked.</p>
<div class="sourceCode" id="cb247"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb247-1" title="1"><span class="kw">library</span>(DT)</a>
<a class="sourceLine" id="cb247-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb247-3" title="3"></a>
<a class="sourceLine" id="cb247-4" title="4">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb247-5" title="5">  <span class="kw">DTOutput</span>(<span class="st">&quot;table&quot;</span>)</a>
<a class="sourceLine" id="cb247-6" title="6">)</a>
<a class="sourceLine" id="cb247-7" title="7"></a>
<a class="sourceLine" id="cb247-8" title="8">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output) {</a>
<a class="sourceLine" id="cb247-9" title="9"></a>
<a class="sourceLine" id="cb247-10" title="10">  output<span class="op">$</span>table &lt;-<span class="st"> </span><span class="kw">renderDT</span>({</a>
<a class="sourceLine" id="cb247-11" title="11">    <span class="co"># on click function</span></a>
<a class="sourceLine" id="cb247-12" title="12">    onclick &lt;-<span class="st"> </span><span class="kw">sprintf</span>(</a>
<a class="sourceLine" id="cb247-13" title="13">      <span class="st">&quot;Shiny.setInputValue(&#39;click&#39;, &#39;%s&#39;)&quot;</span>, </a>
<a class="sourceLine" id="cb247-14" title="14">      <span class="kw">rownames</span>(mtcars)</a>
<a class="sourceLine" id="cb247-15" title="15">    ) </a>
<a class="sourceLine" id="cb247-16" title="16"></a>
<a class="sourceLine" id="cb247-17" title="17">    <span class="co"># button with onClick function</span></a>
<a class="sourceLine" id="cb247-18" title="18">    button &lt;-<span class="st"> </span><span class="kw">sprintf</span>(</a>
<a class="sourceLine" id="cb247-19" title="19">      <span class="st">&quot;&lt;a class=&#39;btn btn-primary&#39; onClick=&#39;%s&#39;&gt;Click me&lt;/a&gt;&quot;</span>,</a>
<a class="sourceLine" id="cb247-20" title="20">      onclick</a>
<a class="sourceLine" id="cb247-21" title="21">    )</a>
<a class="sourceLine" id="cb247-22" title="22"></a>
<a class="sourceLine" id="cb247-23" title="23">    mtcars<span class="op">$</span>button &lt;-<span class="st"> </span>button</a>
<a class="sourceLine" id="cb247-24" title="24">    <span class="kw">datatable</span>(</a>
<a class="sourceLine" id="cb247-25" title="25">      mtcars, </a>
<a class="sourceLine" id="cb247-26" title="26">      <span class="dt">escape =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb247-27" title="27">      <span class="dt">selection =</span> <span class="st">&quot;none&quot;</span>, </a>
<a class="sourceLine" id="cb247-28" title="28">      <span class="dt">rownames =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb247-29" title="29">      <span class="dt">style =</span> <span class="st">&quot;bootstrap&quot;</span></a>
<a class="sourceLine" id="cb247-30" title="30">    )</a>
<a class="sourceLine" id="cb247-31" title="31">  })</a>
<a class="sourceLine" id="cb247-32" title="32"></a>
<a class="sourceLine" id="cb247-33" title="33">}</a>
<a class="sourceLine" id="cb247-34" title="34"></a>
<a class="sourceLine" id="cb247-35" title="35"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>We can then observe the <code>click</code> input and, to demonstrate, render it’s value in the UI, see Figure <a href="shiny-tips.html#fig:dt-button">13.2</a> below.</p>
<div class="sourceCode" id="cb248"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb248-1" title="1"><span class="kw">library</span>(DT)</a>
<a class="sourceLine" id="cb248-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb248-3" title="3"></a>
<a class="sourceLine" id="cb248-4" title="4">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb248-5" title="5">  <span class="kw">br</span>(),</a>
<a class="sourceLine" id="cb248-6" title="6">  <span class="kw">DTOutput</span>(<span class="st">&quot;table&quot;</span>),</a>
<a class="sourceLine" id="cb248-7" title="7">  <span class="kw">strong</span>(<span class="st">&quot;Clicked Model:&quot;</span>),</a>
<a class="sourceLine" id="cb248-8" title="8">  <span class="kw">verbatimTextOutput</span>(<span class="st">&quot;model&quot;</span>)</a>
<a class="sourceLine" id="cb248-9" title="9">)</a>
<a class="sourceLine" id="cb248-10" title="10"></a>
<a class="sourceLine" id="cb248-11" title="11">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output) {</a>
<a class="sourceLine" id="cb248-12" title="12"></a>
<a class="sourceLine" id="cb248-13" title="13">  output<span class="op">$</span>table &lt;-<span class="st"> </span><span class="kw">renderDT</span>({</a>
<a class="sourceLine" id="cb248-14" title="14">    <span class="co"># on click function</span></a>
<a class="sourceLine" id="cb248-15" title="15">    onclick &lt;-<span class="st"> </span><span class="kw">sprintf</span>(</a>
<a class="sourceLine" id="cb248-16" title="16">      <span class="st">&quot;Shiny.setInputValue(&#39;click&#39;, &#39;%s&#39;)&quot;</span>, </a>
<a class="sourceLine" id="cb248-17" title="17">      <span class="kw">rownames</span>(mtcars)</a>
<a class="sourceLine" id="cb248-18" title="18">    ) </a>
<a class="sourceLine" id="cb248-19" title="19"></a>
<a class="sourceLine" id="cb248-20" title="20">    <span class="co"># button with onClick function</span></a>
<a class="sourceLine" id="cb248-21" title="21">    button &lt;-<span class="st"> </span><span class="kw">sprintf</span>(</a>
<a class="sourceLine" id="cb248-22" title="22">      <span class="st">&quot;&lt;a class=&#39;btn btn-primary&#39; onClick=&#39;%s&#39;&gt;Click me&lt;/a&gt;&quot;</span>,</a>
<a class="sourceLine" id="cb248-23" title="23">      onclick</a>
<a class="sourceLine" id="cb248-24" title="24">    )</a>
<a class="sourceLine" id="cb248-25" title="25"></a>
<a class="sourceLine" id="cb248-26" title="26">    <span class="co"># add button to data.frame</span></a>
<a class="sourceLine" id="cb248-27" title="27">    mtcars<span class="op">$</span>button &lt;-<span class="st"> </span>button</a>
<a class="sourceLine" id="cb248-28" title="28"></a>
<a class="sourceLine" id="cb248-29" title="29">    <span class="kw">datatable</span>(</a>
<a class="sourceLine" id="cb248-30" title="30">      mtcars, </a>
<a class="sourceLine" id="cb248-31" title="31">      <span class="dt">escape =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb248-32" title="32">      <span class="dt">selection =</span> <span class="st">&quot;none&quot;</span>, </a>
<a class="sourceLine" id="cb248-33" title="33">      <span class="dt">rownames =</span> <span class="ot">FALSE</span>, </a>
<a class="sourceLine" id="cb248-34" title="34">      <span class="dt">style =</span> <span class="st">&quot;bootstrap&quot;</span></a>
<a class="sourceLine" id="cb248-35" title="35">    )</a>
<a class="sourceLine" id="cb248-36" title="36">  })</a>
<a class="sourceLine" id="cb248-37" title="37"></a>
<a class="sourceLine" id="cb248-38" title="38">  output<span class="op">$</span>model &lt;-<span class="st"> </span><span class="kw">renderPrint</span>({</a>
<a class="sourceLine" id="cb248-39" title="39">    <span class="kw">print</span>(input<span class="op">$</span>click)</a>
<a class="sourceLine" id="cb248-40" title="40">  })</a>
<a class="sourceLine" id="cb248-41" title="41">}</a>
<a class="sourceLine" id="cb248-42" title="42"></a>
<a class="sourceLine" id="cb248-43" title="43"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:dt-button"></span>
<img src="images/dt-button.png" alt="DT with custom inputs" width="100%" />
<p class="caption">
FIGURE 13.2: DT with custom inputs
</p>
</div>
</div>
<div id="shiny-tips-jQuery" class="section level2">
<h2><span class="header-section-number">13.3</span> jQuery</h2>
<p>The Shiny framework itself makes use of and thus imports the <a href="https://jquery.com/">jQuery</a> JavaScript library, a library that provides a convenient API to make many things easier, including animations.</p>
<p>As an example, we could use jQuery’s <code>show</code>, <code>hide</code>, or <code>toggle</code> functions to show or hide an HTML element at the press of a button.</p>
<div class="sourceCode" id="cb249"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb249-1" title="1"><span class="co">// example of jQuery animation</span></a>
<a class="sourceLine" id="cb249-2" title="2"><span class="at">$</span>(<span class="st">&#39;#id&#39;</span>).<span class="at">toggle</span>()<span class="op">;</span></a></code></pre></div>
<p>Because jQuery is already imported, there is no need to do so, on the contrary, importing it again will impact load time and might clash with the pre-existing version. Below we create a Shiny application containing a message handler to toggle (show or hide element depending on its state) at the click of a button.</p>
<div class="sourceCode" id="cb250"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb250-1" title="1"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb250-2" title="2"></a>
<a class="sourceLine" id="cb250-3" title="3">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb250-4" title="4">  tags<span class="op">$</span><span class="kw">head</span>(</a>
<a class="sourceLine" id="cb250-5" title="5">    tags<span class="op">$</span><span class="kw">script</span>(</a>
<a class="sourceLine" id="cb250-6" title="6">      <span class="st">&quot;Shiny.addCustomMessageHandler(</span></a>
<a class="sourceLine" id="cb250-7" title="7"><span class="st">        &#39;jquery-toggle&#39;, function(id){</span></a>
<a class="sourceLine" id="cb250-8" title="8"><span class="st">          $(&#39;#&#39; + id).toggle(); // id</span></a>
<a class="sourceLine" id="cb250-9" title="9"><span class="st">      });&quot;</span></a>
<a class="sourceLine" id="cb250-10" title="10">    )</a>
<a class="sourceLine" id="cb250-11" title="11">  ),</a>
<a class="sourceLine" id="cb250-12" title="12">  <span class="kw">actionButton</span>(<span class="st">&quot;toggle&quot;</span>, <span class="st">&quot;Toggle text&quot;</span>),</a>
<a class="sourceLine" id="cb250-13" title="13">  <span class="kw">h1</span>(<span class="st">&quot;This text is shown!&quot;</span>, <span class="dt">id =</span> <span class="st">&quot;text&quot;</span>)</a>
<a class="sourceLine" id="cb250-14" title="14">)</a>
<a class="sourceLine" id="cb250-15" title="15"></a>
<a class="sourceLine" id="cb250-16" title="16">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</a>
<a class="sourceLine" id="cb250-17" title="17"></a>
<a class="sourceLine" id="cb250-18" title="18">  <span class="kw">observeEvent</span>(input<span class="op">$</span>toggle, {</a>
<a class="sourceLine" id="cb250-19" title="19">    session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="st">&#39;jquery-toggle&#39;</span>, <span class="st">&quot;text&quot;</span>)</a>
<a class="sourceLine" id="cb250-20" title="20">  })</a>
<a class="sourceLine" id="cb250-21" title="21"></a>
<a class="sourceLine" id="cb250-22" title="22">}</a>
<a class="sourceLine" id="cb250-23" title="23"></a>
<a class="sourceLine" id="cb250-24" title="24"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>Note that jQuery takes a selector so one could very well use a class to hide and show multiple elements (with said class) at once.</p>
<div class="sourceCode" id="cb251"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb251-1" title="1"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb251-2" title="2"></a>
<a class="sourceLine" id="cb251-3" title="3">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb251-4" title="4">  tags<span class="op">$</span><span class="kw">head</span>(</a>
<a class="sourceLine" id="cb251-5" title="5">    tags<span class="op">$</span><span class="kw">script</span>(</a>
<a class="sourceLine" id="cb251-6" title="6">      <span class="st">&quot;Shiny.addCustomMessageHandler(</span></a>
<a class="sourceLine" id="cb251-7" title="7"><span class="st">        &#39;jquery-toggle&#39;, function(selector){</span></a>
<a class="sourceLine" id="cb251-8" title="8"><span class="st">          $(selector).toggle();</span></a>
<a class="sourceLine" id="cb251-9" title="9"><span class="st">      });&quot;</span></a>
<a class="sourceLine" id="cb251-10" title="10">    )</a>
<a class="sourceLine" id="cb251-11" title="11">  ),</a>
<a class="sourceLine" id="cb251-12" title="12">  <span class="kw">actionButton</span>(<span class="st">&quot;toggle&quot;</span>, <span class="st">&quot;Toggle text&quot;</span>),</a>
<a class="sourceLine" id="cb251-13" title="13">  <span class="kw">h1</span>(<span class="st">&quot;This text is shown!&quot;</span>, <span class="dt">class =</span> <span class="st">&quot;to-toggle&quot;</span>),</a>
<a class="sourceLine" id="cb251-14" title="14">  <span class="kw">actionButton</span>(</a>
<a class="sourceLine" id="cb251-15" title="15">    <span class="st">&quot;btn&quot;</span>, <span class="st">&quot;Another visible button&quot;</span>, <span class="dt">class =</span> <span class="st">&quot;to-toggle&quot;</span></a>
<a class="sourceLine" id="cb251-16" title="16">  )</a>
<a class="sourceLine" id="cb251-17" title="17">)</a>
<a class="sourceLine" id="cb251-18" title="18"></a>
<a class="sourceLine" id="cb251-19" title="19">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</a>
<a class="sourceLine" id="cb251-20" title="20"></a>
<a class="sourceLine" id="cb251-21" title="21">  <span class="kw">observeEvent</span>(input<span class="op">$</span>toggle, {</a>
<a class="sourceLine" id="cb251-22" title="22">    session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="st">&#39;jquery-toggle&#39;</span>, <span class="st">&quot;.to-toggle&quot;</span>)</a>
<a class="sourceLine" id="cb251-23" title="23">  })</a>
<a class="sourceLine" id="cb251-24" title="24"></a>
<a class="sourceLine" id="cb251-25" title="25">}</a>
<a class="sourceLine" id="cb251-26" title="26"></a>
<a class="sourceLine" id="cb251-27" title="27"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>This is something where, again, R is leveraged in order to make it easier on the Shiny developer, but it must be said that it suffers from some inefficiency: the message travels from the browser (button click) to the R server, where it is sent back to the browser and triggers <code>toggle</code>. It could indeed very well be rewritten in JavaScript entirely. This is, however, outside the scope of this book.</p>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="shiny-complete.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="shiny-output.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/4-13-shiny-tips.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
